<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-icon" @click="goBack">
				<text class="iconfont">←</text>
			</view>
			<view class="title">扬子晚报微信自助登报</view>
			<view class="website">read.yangtse.com</view>
			<view class="more-icon">
				<text class="iconfont">...</text>
			</view>
		</view>
		
		<!-- 蓝色标题栏 -->
		<view class="blue-header">
			<text class="blue-title">微信自助登报</text>
		</view>
		
		<!-- 步骤导航 -->
		<view class="step-nav">
			<view class="step">
				<text class="step-num">1</text>
				<text class="step-text">选择分类</text>
			</view>
			<view class="step-line"></view>
			<view class="step active">
				<text class="step-num">2</text>
				<text class="step-text">信息填写</text>
			</view>
			<view class="step-line"></view>
			<view class="step">
				<text class="step-num">3</text>
				<text class="step-text">确认支付</text>
			</view>
		</view>
		
		<!-- 已选择分类提示 -->
		<view class="selected-category">
			<text>您已选择分类：{{category}}----{{subCategory}}</text>
		</view>
		
		<!-- 表单内容 -->
		<view class="form-container">
			<!-- 个人信息 -->
			<view class="form-section">
				<view class="form-item">
					<text class="form-label">您的姓名<text class="required">*</text></text>
					<input type="text" class="form-input" v-model="formData.name" placeholder="请输入姓名" />
				</view>
				
				<view class="form-item">
					<text class="form-label">您的手机<text class="required">*</text></text>
					<input type="number" class="form-input" v-model="formData.phone" placeholder="请输入手机号码" maxlength="11" />
				</view>
				
				<view class="form-item">
					<text class="form-label">见报内容<text class="required">*</text></text>
					<textarea class="form-textarea" v-model="formData.content" placeholder="遗失XXX(姓名)身份证，证号：XXXX，有效期：2000.10.10-2022.10.10，特此登报声明作废。" />
				</view>
				
				<view class="word-count">
					<text>您已输入汉字：{{chineseCount}}个，数字/字母：{{digitCount}}个， 价格：{{totalPrice}}元</text>
				</view>
				
				<view class="form-actions">
					<view class="action-btn content-confirm" @click="confirmContent">
						<text>见报内容确认</text>
					</view>
					<view class="action-btn content-reset" @click="resetContent">
						<text>重新填写</text>
					</view>
				</view>
			</view>
			
			<!-- 刊登注意事项 -->
			<view class="notice-section">
				<text class="notice-title">刊登注意事项<text class="required">*</text></text>
				<view class="notice-content">
					<text>(请自主购刊登日期当天纸质报纸，如需邮寄请联系13776769686或qq: 1747152853)</text>
					<text class="notice-item">*刊登日期只能是周一至周六</text>
					<text class="notice-item">*每天下午3点前办理第二天见报，3点后隔天见报</text>
					<text class="notice-item">*周五三点后下周二见报</text>
					<text class="notice-item">*可以在电子报查看</text>
				</view>
			</view>
			
			<!-- 刊登日期 -->
			<view class="form-section">
				<text class="section-title">刊登日期<text class="required">*</text></text>
				<view class="date-format-tip">
					<text>请按照20200301格式填写，多天以逗号分隔开：</text>
				</view>
				<view class="date-template">
					<text>模板：20200301，20200302，20200303</text>
				</view>
				<view class="input-container">
					<input type="text" class="form-input date-input" v-model="formData.publishDate" placeholder="请输入刊登日期" />
				</view>
				<view class="date-count-tip">
					<text>请使用数字输入一共刊登的天数：</text>
				</view>
				<view class="input-container">
					<input type="number" class="form-input date-input" v-model="formData.publishDays" placeholder="请输入刊登天数" />
				</view>
			</view>
			
			<!-- 发票信息 -->
			<view class="form-section">
				<view class="invoice-header">
					<text class="section-title">开具电子发票</text>
					<view class="invoice-switch">
						<text>是否需要发票</text>
						<switch :checked="formData.needInvoice" @change="toggleInvoice" color="#2ecc71" />
					</view>
				</view>
				<view class="invoice-tip">
					<text>刊登日期10个工作日后开具电子发票</text>
				</view>
				
				<view v-if="formData.needInvoice">
					<view class="form-item">
						<text class="form-label">发票抬头<text class="required">*</text></text>
						<input type="text" class="form-input" v-model="formData.invoiceTitle" placeholder="填写发票抬头(个人请输入姓名)" />
					</view>
					
					<view class="form-item">
						<text class="form-label">纳税人识别号<text class="required">*</text></text>
						<input type="text" class="form-input" v-model="formData.taxNumber" placeholder="填写纳税人识别号(个人请输入身份证号码)" />
					</view>
					
					<view class="form-item">
						<text class="form-label">电子邮箱<text class="required">*</text></text>
						<input type="text" class="form-input" v-model="formData.email" placeholder="请输入电子邮箱" />
					</view>
					
					<view class="form-item">
						<text class="form-label">收件人手机<text class="required">*</text></text>
						<input type="number" class="form-input" v-model="formData.receiverPhone" placeholder="如不填，默认刊登者手机" />
					</view>
				</view>
				<view v-else class="no-invoice-tip">
					<text>您已选择不开具发票</text>
				</view>
			</view>
			
			<!-- 费用合计 -->
			<view class="total-cost">
				<text class="cost-title">合计费用</text>
				<view class="cost-item">
					<text>合计费用：{{totalPrice}}元</text>
				</view>
				<view class="cost-item">
					<text>刊登天数：{{formData.publishDays || 0}}天</text>
				</view>
				<view class="cost-item">
					<text>刊登价格：{{totalPrice}}元</text>
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<view class="submit-btn" @click="submitForm">
				<text>确认提交</text>
			</view>
		</view>
		
		<!-- 底部版权信息 -->
		<view class="footer">
			<view class="footer-contact" @click="callCustomerService">
				<text>客服电话：</text>
				<text class="contact-phone">13776769686</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				category: '',
				subCategory: '',
				contentTemplate: '',
				formData: {
					name: '',
					phone: '',
					content: '',
					publishDate: '',
					publishDays: '',
					needInvoice: false,
					invoiceTitle: '',
					taxNumber: '',
					email: '',
					receiverPhone: ''
				}
			}
		},
		computed: {
			// 计算汉字数量
			chineseCount() {
				if (!this.formData.content) return 0;
				const chineseRegex = /[\u4e00-\u9fa5]/g;
				const matches = this.formData.content.match(chineseRegex);
				return matches ? matches.length : 0;
			},
			// 计算数字和字母数量
			digitCount() {
				if (!this.formData.content) return 0;
				const digitRegex = /[a-zA-Z0-9]/g;
				const matches = this.formData.content.match(digitRegex);
				return matches ? matches.length : 0;
			},
			// 计算总价格
			totalPrice() {
				// 汉字3元/字，数字字母2元/个
				const chinesePrice = this.chineseCount * 3;
				const digitPrice = this.digitCount * 2;
				return chinesePrice + digitPrice;
			}
		},
		onLoad(options) {
			// 获取传递过来的分类信息
			if (options.categoryData) {
				try {
					const categoryData = JSON.parse(decodeURIComponent(options.categoryData));
					this.category = categoryData.category || '';
					this.subCategory = categoryData.subCategory || '';
					this.contentTemplate = categoryData.template || '请在此处填写完整的见报内容。';
					this.formData.content = this.contentTemplate;
					console.log('解析到的分类数据:', categoryData);
				} catch (e) {
					console.error('解析分类数据失败:', e);
					this.contentTemplate = '请在此处填写完整的见报内容。';
					this.formData.content = this.contentTemplate;
					uni.showToast({
						title: '分类数据解析失败',
						icon: 'none'
					});
				}
			} else {
				this.contentTemplate = '请在此处填写完整的见报内容。';
				this.formData.content = this.contentTemplate;
			}
		},
		methods: {
			goBack() {
				const pages = getCurrentPages(); // 获取当前页面栈数组
				if (pages.length > 1) {
					// 如果页面栈深度大于1，则执行后退操作
					uni.navigateBack({
						delta: 1 // 后退层数，默认1
					});
				} else {
					// 如果页面栈深度等于1，说明是第一个页面，无法后退
					// 则跳转到首页（假设首页是 Tab 页，使用 switchTab）
					uni.switchTab({
						url: '/pages/index/index' 
					});
					// 或者如果 index 不是 tab 页:
					// uni.reLaunch({
					//     url: '/pages/index/index'
					// });
				}
			},
			confirmContent() {
				if (!this.formData.content) {
					uni.showToast({
						title: '请填写见报内容',
						icon: 'none'
					});
					return;
				}
				uni.showToast({
					title: '内容已确认',
					icon: 'success'
				});
			},
			resetContent() {
				this.formData.content = this.contentTemplate;
				uni.showToast({ title: '内容已重置为模板', icon: 'none' });
			},
			toggleInvoice(e) {
				this.formData.needInvoice = e.detail.value;
			},
			submitForm() {
				// 表单验证
				if (!this.formData.name) {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.phone) {
					uni.showToast({
						title: '请填写手机号码',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.content) {
					uni.showToast({
						title: '请填写见报内容',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.publishDate) {
					uni.showToast({
						title: '请填写刊登日期',
						icon: 'none'
					});
					return;
				}
				
				// 如果需要发票，验证发票信息
				if (this.formData.needInvoice) {
					if (!this.formData.invoiceTitle) {
						uni.showToast({
							title: '请填写发票抬头',
							icon: 'none'
						});
						return;
					}
					if (!this.formData.taxNumber) {
						uni.showToast({
							title: '请填写纳税人识别号',
							icon: 'none'
						});
						return;
					}
					if (!this.formData.email) {
						uni.showToast({
							title: '请填写电子邮箱',
							icon: 'none'
						});
						return;
					}
				}
				
				// 显示加载提示
				uni.showLoading({
					title: '提交中...'
				});
				
				console.log('准备调用云函数，参数：', {
					category: this.category,
					subCategory: this.subCategory,
					name: this.formData.name,
					phone: this.formData.phone,
					content: this.formData.content,
					publishDate: this.formData.publishDate,
					publishDays: this.formData.publishDays,
					needInvoice: this.formData.needInvoice,
					invoiceTitle: this.formData.invoiceTitle,
					taxNumber: this.formData.taxNumber,
					email: this.formData.email,
					receiverPhone: this.formData.receiverPhone,
					price: this.totalPrice
				});
				
				// 调用云函数提交数据
				uniCloud.callFunction({
					name: 'submitAdInfo',
					data: {
						category: this.category,
						subCategory: this.subCategory,
						name: this.formData.name,
						phone: this.formData.phone,
						content: this.formData.content,
						publishDate: this.formData.publishDate,
						publishDays: this.formData.publishDays,
						needInvoice: this.formData.needInvoice,
						invoiceTitle: this.formData.invoiceTitle,
						taxNumber: this.formData.taxNumber,
						email: this.formData.email,
						receiverPhone: this.formData.receiverPhone,
						price: this.totalPrice
					}
				}).then(res => {
					console.log('云函数调用成功，返回结果：', res);
					uni.hideLoading();
					
					// 检查返回结果
					if (res.result && res.result.code === 0) {
						console.log('提交成功，订单ID：', res.result.data.id);
						// 提交成功，跳转到支付页面
						uni.navigateTo({
							url: '/pages/payment/payment?price=' + this.totalPrice + '&needInvoice=' + this.formData.needInvoice + '&orderId=' + res.result.data.id
						});
					} else {
						console.error('提交失败，错误信息：', res.result);
						// 提交失败，显示错误信息
						uni.showToast({
							title: res.result ? res.result.message : '提交失败，请重试',
							icon: 'none'
						});
					}
				}).catch(err => {
					console.error('云函数调用失败：', err);
					uni.hideLoading();
					uni.showToast({
						title: '提交失败：' + (err.message || '未知错误'),
						icon: 'none'
					});
				});
			},
			callCustomerService() {
				uni.makePhoneCall({
					phoneNumber: '13776769686',
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.log('拨打电话失败', err);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 40rpx;
}

.header {
	background: linear-gradient(135deg, #2ecc71, #27ae60);
	color: #fff;
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	
	.title {
		font-size: 36rpx;
		font-weight: 500;
		text-align: center;
		flex: 1;
	}
	
	.website {
		font-size: 24rpx;
		opacity: 0.8;
		position: absolute;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.back-icon {
		font-size: 40rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 30rpx;
		
		&:active {
			opacity: 0.8;
			background-color: rgba(255, 255, 255, 0.3);
		}
	}
}

.blue-header {
	background: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	
	.blue-title {
		color: #2ecc71;
		font-size: 32rpx;
		font-weight: bold;
	}
}

.step-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 40rpx;
	background: #fff;
	margin-bottom: 20rpx;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	
	.step {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		&.active {
			.step-num {
				background: #2ecc71;
				color: #fff;
			}
			.step-text {
				color: #2ecc71;
			}
		}
		
		.step-num {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background: #eee;
			color: #999;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			margin-bottom: 10rpx;
		}
		
		.step-text {
			font-size: 24rpx;
			color: #666;
		}
	}
	
	.step-line {
		flex: 1;
		height: 2rpx;
		background: #eee;
		margin: 0 20rpx;
		margin-bottom: 30rpx;
	}
}

.selected-category {
	background: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	font-size: 28rpx;
	color: #666;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.form-container {
	padding: 0 20rpx;
}

.form-section {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	
	.section-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 20rpx;
	}
}

.form-item {
	margin-bottom: 30rpx;
	
	.form-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 15rpx;
		display: block;
		
		.required {
			color: #ff4d4f;
			margin-left: 4rpx;
		}
	}
	
	.form-input {
		width: 100%;
		height: 80rpx;
		background: #f5f5f5;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
		
		&:focus {
			background: #f0f0f0;
		}
	}
	
	.form-textarea {
		width: 100%;
		height: 200rpx;
		background: #f5f5f5;
		border-radius: 8rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		
		&:focus {
			background: #f0f0f0;
		}
	}
}

.word-count {
	font-size: 26rpx;
	color: #666;
	margin: 20rpx 0;
	padding: 20rpx;
	background: #f9f9f9;
	border-radius: 8rpx;
}

.form-actions {
	display: flex;
	gap: 20rpx;
	margin-top: 30rpx;
	
	.action-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		
		&.content-confirm {
			background: #2ecc71;
			color: #fff;
			
			&:active {
				opacity: 0.9;
			}
		}
		
		&.content-reset {
			background: #f5f5f5;
			color: #666;
			
			&:active {
				background: #f0f0f0;
			}
		}
	}
}

.notice-section {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	
	.notice-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 20rpx;
		
		.required {
			color: #ff4d4f;
			margin-left: 4rpx;
		}
	}
	
	.notice-content {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		
		.notice-item {
			display: block;
			margin-top: 10rpx;
			color: #ff4d4f;
		}
	}
}

.date-format-tip, .date-template {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 15rpx;
}

.date-template {
	color: #4a90e2;
}

.input-container {
	border: 2px solid #2ecc71;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
	background-color: #f5f5f5;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.date-input {
	background-color: #fff !important;
	border: none !important;
	height: 90rpx !important;
	font-size: 30rpx !important;
}

.date-count-tip {
	font-size: 26rpx;
	color: #666;
	margin: 20rpx 0 15rpx;
	font-weight: 500;
}

.invoice-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	
	.invoice-switch {
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-size: 26rpx;
		color: #666;
		
		switch {
			color: #2ecc71;
		}
	}
}

.invoice-tip {
	font-size: 26rpx;
	color: #999;
	margin-bottom: 30rpx;
}

.no-invoice-tip {
	font-size: 26rpx;
	color: #999;
	text-align: center;
	padding: 30rpx 0;
}

.total-cost {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	
	.cost-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 20rpx;
	}
	
	.cost-item {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
		
		&:last-child {
			margin-bottom: 0;
			color: #4a90e2;
			font-weight: 500;
		}
	}
}

.submit-btn {
	margin: 0 30rpx;
	height: 88rpx;
	background: linear-gradient(135deg, #2ecc71, #27ae60);
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	box-shadow: 0 4px 8px rgba(46,204,113,0.2);
	
	&:active {
		opacity: 0.9;
	}
}

.footer {
	margin-top: 60rpx;
	padding: 30rpx;
	text-align: center;
	
	.footer-contact {
		font-size: 28rpx;
		color: #666;
		
		.contact-phone {
			color: #2ecc71;
			font-weight: 500;
		}
	}
}
</style> 